<template>
    <div>
      <div id="box">
        <div @click="$router.back()" id="left">
          <van-icon color="#fff" size="22" name="arrow-left" />
        </div>
        <input type="text" placeholder="请输入小区或地址">
        <div @click="$router.push('/mapfindroom')" id="right">
          <van-icon  color="#fff" size="26" name="location-o" />
        </div>
      </div>
      <div class="DropdownMenu">
        <van-dropdown-menu active-color="#21b97a">
          <van-dropdown-item v-model="value" :options="option" ></van-dropdown-item>
          <van-dropdown-item v-model="value1" :options="option1" ></van-dropdown-item>
          <van-dropdown-item v-model="value2" :options="option2" ></van-dropdown-item>

          <van-dropdown-item title="筛选" ref="item">

            <van-cell center title="包邮">
              <template #right-icon>
                <!-- <van-switch v-model="switch1" size="24" active-color="#ee0a24" /> -->
              </template>
            </van-cell>

            <van-cell center title="团购">
              <template #right-icon>
                <!-- <van-switch v-model="switch2" size="24" active-color="#ee0a24" /> -->
              </template>
            </van-cell>

            <div active-color="#21b97a" style="padding: 5px 16px;">
              <van-button type="danger" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>

        </van-dropdown-menu>
      </div>
      <van-list 
      v-model="loading" 
      :finished="finished" 
      finished-text="没有更多" 
      @load="onLoad" 
      >
          <FindRoom  v-for="(item,index) in picList" :key="index" :picList="item" :id="item.houseCode" />
      </van-list>
    </div>
</template>
<script>
import FindRoom from "@/components/FindRoom"
// 找房列表
import {getFindRoomListApi} from "@/api/FindRoom"

export default {
  components:{
    FindRoom
  },
    props: {

    },
    data() {
        return {
          value: 0,
          value1: 0,
          value2: 0,
          switch1: false,
          switch2: false,
          option: [
            { text: '区域', value: 0 },
            { text: '北京', value: 1 },
            { text: '上海', value: 2 },
            { text: '广州', value: 3 },
            { text: '杭州', value: 4 },
            { text: '苏州', value: 5 },
            { text: '南京', value: 6 },
          ],
          option1: [
            { text: '整租', value: 0 },
            { text: '合租', value: 1 },
            { text: '不限', value: 2 },
          ],
          option2: [
            { text: '租金不限', value: 0 },
            { text: '1000以下', value: 1 },
            { text: '1000-2000', value: 2 },
            { text: '2000-3000', value: 3 },
            { text: '3000-4000', value: 4 },
            { text: '4000-5000', value: 5 },
            { text: '5000-6000', value: 6 },
            { text: '6000-7000', value: 7 },
            { text: '7000以上', value: 8 },
          ],
          finished: false,
          loading: false,
          picList:[],
          img:`http://liufusong.top:8080`,
          params:{
            page_size: 10,
            cur_page: 1,
          }
        };
    },
    mounted(){
      // 调用找房列表
        this.getList()
    },
    methods: {
      async getList () {
        try {
          // 获取找房列表
          const list = await getFindRoomListApi(this.params)   
          const newlist = list.body.filter(item => item.houseImg = `http://liufusong.top:8080${item.houseImg}`)
          this.picList = [...this.picList,...newlist]
          this.picList = newlist
        } catch(e) {
            console.log(e);
         }
        },
        // 滚动事件
      async onLoad() {
          this.params.cur_page++
          await this.getList()
          this.loading= false
          // if(this.picList.length >= 60) {
          // this.finished = true
          // }
      },
       onConfirm() {
       },
      // async fn (id) {
      //   // console.log(id);
      //   this.$router.push({
      //     path:"/detail",
      //     query: id
      //   })
      //   // const res = await getFindRoomDetailApi(id)
      //   // console.log(res);
      //  }
     },
      // 重新激活
    activated() {
      // 重新调用
      this.getList()
    },
    // 未激活
    deactivated() {
      this.picList = {}
    }
}

</script>

<style scoped>
#box {

  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background-color: #21b97a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
input {
  width: 274px;
  height: 34px;
  border-radius: 3px;
  background:#fff;
  outline:none;
  border:0px;
  font-size: 13px;
  color: #9c9fa3;
  padding-left: 10px;
}

#left {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #21b97a;
  font-size: 12px;
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
#right {
  align-items: center;
  justify-content: center;
  display: flex;
  color: #21b97a;
  font-size: 12px;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.DropdownMenu {
   top: 0;
   width: 100%;
   position: sticky;
}
.van-button, .van-button--danger, .van-button--normal, .van-button--block, .van-button--round {
  background-color: #21b97a;
  border: #21b97a;
}
</style>
